var aColorSeries = {
    r: [255],
    g: [0],
    b: [0]
}

/**
 * r   g   b
 * 255 0   0 初始颜色
 * 255 255 0 增加g
 * 0   255 0 减少r
 * 0   255 255 增加b
 * 0   0   255 减少g
 * 255 0   255 增加r
 * 255 0   0   减少b
 */
var aColorVary = ['g', 'r', 'b', 'g', 'r', 'b']

var eSeries = document.querySelector("#sideCon")

var nSeriesLen = Math.floor(eSeries.offsetHeight / 6) // 高度分为6个阶段

var nStep = Math.floor(255 / nSeriesLen) // 每像素对应多少个值

var nStepRemainder = 255 / nSeriesLen - nStep // 误差

for (let i = 0; i < aColorVary.length; i++) {
    let add = (i % 2); // 0 1 0 1 0 1 ，0是增加，1是减小
    let nFull = 0;
    for (let j = 0; j < nSeriesLen + add; j++) {
        nFull += nStepRemainder
        let nAddStep = nStep
        if (nFull > 1) {
            nAddStep = nStep + 1
            nFull = nFull - 1
        }
        for (let k in aColorSeries) { // r g b
            let nVal = 0;
            let nOldVal = aColorSeries[k][aColorSeries[k].length - 1]
            if (k == aColorVary[i]) {
                if (add == 0) {
                    nVal = nOldVal + nAddStep
                } else {
                    nVal = nOldVal - nAddStep
                }
                if (nVal > 255) {
                    nVal = 255
                } else if (nVal < 0) {
                    nVal = 0
                }
            } else {
                nVal = nOldVal
            }
            aColorSeries[k].push(nVal)
        }
    }
}

var eMainCon = document.querySelector("#mainCon")

var eSideDrag = document.querySelector("#sideDrag")

var nSideDragH = eSideDrag.offsetHeight

var nSideH = eSeries.offsetHeight - nSideDragH / 2

eSideDrag.addEventListener('mousedown', function (e) {
    var nInitY = e.clientY
    var nInitTop = this.offsetTop
    var nY = null
    var color = null
    document.onmousemove = throlle(e => {
        e.preventDefault()
        nY = e.clientY - nInitY + nInitTop
        if (nY >= nSideH - 1) nY = nSideH - 1
        if (nY <= -nSideDragH / 2) nY = -nSideDragH / 2
        this.style.top = nY + 'px'
        let n = nY + nSideDragH / 2
        color = {
            r: aColorSeries.r[n],
            g: aColorSeries.g[n],
            b: aColorSeries.b[n]
        }
        eMainCon.style.background = `rgb(${color.r},${color.g},${color.b})`
    }, 100)
    document.onmouseup = e => {
        document.onmouseup = null
        document.onmousemove = null
        color && fnColorSet(color);
        fnColorFull(JSON.stringify([color.r, color.g, color.b]))
    }
})

eSeries.addEventListener('click', function (e) {
    let nY = e.offsetY - nSideDragH / 2
    eSideDrag.style.top = nY + 'px'
    let n = nY + nSideDragH / 2
    color = {
        r: aColorSeries.r[n],
        g: aColorSeries.g[n],
        b: aColorSeries.b[n]
    }
    eMainCon.style.background = `rgb(${color.r},${color.g},${color.b})`
    color && fnColorSet(color);
    fnColorFull(JSON.stringify([color.r, color.g, color.b]))
})

var aColorMainStore = []
var nMainW = eMainCon.offsetWidth
var nMainH = eMainCon.offsetHeight
fnColorSet({ r: 255, g: 0, b: 0 });

var eColorFull = document.querySelector('#colorFull');
var eColorText = document.querySelector('#colorText');
var aColorInput = eColorText.querySelectorAll('input');
fnColorFull('[255, 255, 255]');

var eMainDrag = document.querySelector('#mainDrag');
var nSX = 0;
var nSY = 0;
var nMainDragH = eMainDrag.offsetHeight;
var nMainLimitW = nMainW - nMainDragH / 2;
var nMainLimitH = nMainH - nMainDragH / 2;
eMainDrag.addEventListener('mousedown', function (e) {
    var nInitX = e.clientX;
    var nInitY = e.clientY;
    var nInitTop = this.offsetTop;
    var nInitLeft = this.offsetLeft;
    document.onmousemove = throlle(e => {
        e.preventDefault();
        let nX = e.clientX - nInitX + nInitLeft;
        let nY = e.clientY - nInitY + nInitTop;
        if (nY >= nMainLimitH - 1) nY = nMainLimitH - 1;
        if (nY <= -nMainDragH / 2) nY = -nMainDragH / 2;
        if (nX >= nMainLimitW - 1) nX = nMainLimitW - 1;
        if (nX <= -nMainLimitW / 2) nX = -nMainLimitW / 2;
        this.style.left = nX + 'px';
        this.style.top = nY + 'px';
        nSX = nX + nMainDragH / 2;
        nSY = nY + nMainDragH / 2;
        let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
        fnColorFull(JSON.stringify([oColor.r, oColor.g, oColor.b]));
    }, 50)
    document.onmouseup = e => {
        document.onmouseup = null;
        document.onmousemove = null;
    }
})
eMainCon.addEventListener('click', function (e) {
    let nX = e.offsetX - nMainDragH / 2;
    let nY = e.offsetY - nMainDragH / 2;
    eMainDrag.style.transition = '.1s';
    setTimeout(_ => {
        eMainDrag.style.transition = 'inherit'
    }, 100);
    eMainDrag.style.top = nY + 'px';
    eMainDrag.style.left = nX + 'px';
    nSX = nX + nMainDragH / 2;
    nSY = nY + nMainDragH / 2;
    let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
    fnColorFull(JSON.stringify([oColor.r, oColor.g, oColor.b]));
});